<template>
  <div class="main">
    <div class="data-left">
      <dataPanel title="园区概览"  :height="30" icon="/static/img/park/home/1.webp">
        <parkProfile></parkProfile>
      </dataPanel>
      <dataPanel title="企业入驻情况" :height="32.5" icon="/static/img/park/home/2.webp">
        <selectBox name1="企业入驻趋势" name2="企业产业分布">
          <template #one>
            <chart-view class="chart-content" :chart-option="chartLine" :auto-resize="true" height="100%" />
          </template>
          <template #two>
            <chart-view  :chart-option="chartdata21" :auto-resize="true" height="100%"></chart-view>
          </template>
        </selectBox>
      </dataPanel>
      <dataPanel title="通行统计" :height="34" icon="/static/img/park/home/3.webp">
        <selectBox :name1="'人员通行'" :name2="'车辆通行'">
          <template #one>
            <person></person>
          </template>
          <template #two>
            <stop></stop>
          </template>
        </selectBox>
      </dataPanel>
    </div>
    <div class="data-right">
      <dataPanel title="告警记录" :height="35.5" icon="/static/img/park/home/4.webp">
        <div style="height: 60%;">
          <chart-view class="chart-content" :chart-option="chartdata22" :auto-resize="true" height="100%" />
        </div>
        <div style="height: 40%;">
          <Eltable :table_data="warLoglist" :is_index="true" :is_view="true"></Eltable>
        </div>
      </dataPanel>
      <dataPanel title="近7日能耗" :height="33" icon="/static/img/park/home/5.webp">
        <chart-view class="chart-content" :chart-option="chartLines" :auto-resize="true" height="100%" />
      </dataPanel>
      <dataPanel title="设备运营" :height="30.5" icon="/static/img/park/home/6.webp">
        <div class="item">
          <ul class="item_top">
            <li >
              <chart-view class="chart-content" :chart-option="itemOnlineEchart" :auto-resize="true" height="100%" />
            </li>
            <li >
              <div class="data_item">
                <p>400</p>
                <b>/</b>
                <span>2</span>
              </div>
              <p>设备概况</p>
            </li>
            <li >
              <div class="data_item">
                <p>82</p>
                <b>%</b>
              </div>
              <p>设备在线率</p>
            </li>
            <li >
              <chart-view class="chart-content" :chart-option="itemOfflineEchart" :auto-resize="true" height="100%" />
            </li>
          </ul>
          <ul class="item_bottom">
            <li v-for="item in itemManagData">
              <b>{{ item.name }}</b>
              <div class="container">
                <div class="schedule" :style="{'width':item.online / (item.online + item.offline) * 100 + '%' }"></div>
              </div>
              <div class="text">
                <p>
                  {{ item.online }} /
                  <span>
                    {{ item.offline }}
                  </span>
                  台
                </p>
              </div>
            </li>
          </ul>
        </div>
      </dataPanel>
    </div>
  </div>
</template>

<script>
import  dataPanel from "../../../components/park/dataPanel.vue"   // 数据框
import  selectBox from "../../../components/park/selectBox.vue"   //tab
import parkProfile from "./components/parkProfile/index.vue"  //园区概览
import person from "./components/person/index.vue"   //通行统计-人员通行
import stop from "./components/stop/index.vue"  //通行统计-车辆通行
import  Eltable from "../../../components/park/table01.vue"   // table表单
import {  gradientCircleLineData, gradientCircleLineDatas, itemOnlineEchartData, itemOfflineEchartData } from './assets/js/chartData'  //图表数据
import { warLog ,itemManag} from './assets/js/tableData'  //表单数据

export default{
  data:{
    return:{
      chartdata21:{},
      chartdata22:{},
      chartLine:{},
      chartLines:{},
      warLoglist:{},
      itemOnlineEchart:{},
      itemOfflineEchart:{},
      itemManagData:{}
    }
  },
  created(){
    this.chartdata21 = this.$eChartFn.data21(); //图表 - 企业产业分布
    this.chartdata22 = this.$eChartFn.data22(); //图表 - 告警记录
    this.chartLine = this.$eChartFn.gradientCircleLine(gradientCircleLineData);  //图表-近7日能耗
    this.chartLines = this.$eChartFn.gradientCircleLineDynami(gradientCircleLineDatas);  //图表-近7日能耗
    this.itemOnlineEchart = this.$eChartFn.gaugeData11(itemOnlineEchartData); //图表 - 设备运营 在线
    this.itemOfflineEchart = this.$eChartFn.gaugeData11(itemOfflineEchartData); //图表 - 设备运营 离线
    this.warLoglist = warLog
    this.itemManagData = itemManag
  },
  components:{
    dataPanel,
    parkProfile,
    selectBox,
    stop,
    Eltable,
    person
}
}
</script>

<style scoped lang="less">
@import '../../assets/css/chuShiHua.less';
@import './assets/css/home.less';

.main{
  .WH();
  display: flex;
  justify-content: space-between;
  .data-left, .data-right{
    .WH(24%,95%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>
